<template>
    <div id="app" ref="appRef">
        <router-view></router-view>
    </div>
</template>
<script>
    import i18n from './lang'
    export default {
        name: 'App',
        data(){
            return {
                path:null
            }
        },
        components: {

        },
        created() {

        },
        watch: {
            'i18n.locale'(newVal, oldVal) {
                if (newVal !== oldVal) {
                    console.log('APP.vue监听到语言变化了，新的语言是：',newVal);
                    // location.reload()
                }
            },
            '$store.state.language'(val, oldVal){
                // console.log('语言变化了啊APP',this.$store.state.language);
                // this.W.$tips("success", '语言变化了啊');
                // console.log(val, oldVal,"watch监听事件");
                // if (!val || !oldVal) {
                //     this.getCollectAppList()
                // }
            },
            $route(to,from){
               // setTimeout(()=>{
               //     this.i18n.locale=sessionStorage.getItem('language')
               //     console.log(30,this.i18n.locale);
               // },1000)
                console.log('store的语言**********',this.$store.state.language);
                console.log('i18n的语言**********',this.i18n.locale);
                console.log('session的语言**********',sessionStorage.getItem('language'));
                document.title=this.i18n.t('System name')
                this.path=to.path
                if(to.path=='/login'&&this.$globalWebSocket.ws.url){
                    // this.$globalWebSocket.ws.close()
                    // console.log('app.vue关闭websocket',this.$globalWebSocket.ws)
                }else{
                    if(!this.$globalWebSocket.ws.url){
                        this.initWebSocket();
                    }
                }
                console.log('socketURL',this.$globalWebSocket.ws);
            }
        },
        mounted() {
            console.log('APP',this.$store.state.language);
            // setTimeout(()=>{
            //     this.$store.dispatch('setLanguage', 'en')
            // },3*1000)
        },
        beforeDestroy() {

        },
        methods: {
            // closeSocket(){
            //     if(this.$globalWebSocket.ws.url){
            //         console.log('关闭websocket',this.$globalWebSocket.ws);
            //
            //     }
            // },
            // handleMsg() {
            //     this.$globalWebSocket.onmessage = this.getMessage
            // },
            //接收服务器发来的消息
            getMessage: function (e) {
                console.log('27服务器发来的消息是：',e.data);
            },
            //app.vue
            initWebSocket() {
                let that = this;
                if ("WebSocket" in window) {
                    console.log("支持 WebSocket!");
                    var socketIP=process.env.NODE_ENV == 'development' ? "127.0.0.1:15553" : location.host,
                    // var socketIP=process.env.NODE_ENV == 'development' ? "172.31.52.151:15553" : location.host,
                        socketUrl="ws://"+socketIP+"/websocekt"
                    that.ws = new WebSocket(socketUrl);
                    that.$globalWebSocket.setWs(that.ws);
                    // that.ws.onopen = that.onopen();
                    that.ws.onopen = function () {
                        console.log('webSocket已连接√√√√√√√√√√√√√√√√√√√√√√√')
                    };
                    that.ws.onmessage = function (e) {
                      console.log(e);
                      if(e.data){
                            var data=JSON.parse(e.data)
                        console.log('当前页面的路由：',that.path);
                        if(that.path!="/login"){
                                /*
                                * card-info：读取身份证时
                                * nfc-info:卡片式读卡器消息
                                * */
                                if(data.topic == 'message-hint'||data.topic=='message-warning'||data.topic=='message-error'||data.topic=='message-success'){
                                    // console.log(100,data.message);
                                    that.W.$mywebSocketMessage(data.message)
                                } //兼容非通行记录

                              console.log('在人员管理页面，添加人员弹窗是否打开：',that.$store.state.isAddPeoplePage);
                              var result=data.message


                              // 当人员管理页面-添加人员弹窗处于打开状态时才修改
                              if (that.$store.state.isAddPeoplePage){

                                // 消息类型是证件（身份证）
                                if(data.topic=='card-info'){
                                  var result=data.message

                                  if(result.cardNo!==""&&result.cardNo!==null){
                                    // 设置身份证号码
                                    that.$store.commit('setIdCard',result.cardNo)
                                  }
                                  if(result.image!==""&&result.image!==null){
                                    console.log('设置vuex人脸照片');
                                    // 设置人脸照片
                                    that.$store.commit('setImage',result.image)
                                  }
                                  if(result.name!==""&&result.name!==null){
                                    // 设置名字
                                    that.$store.commit('setName',result.name)
                                  }
                                  if(result.sex!==""&&result.sex!==null){
                                    // 设置性别
                                    that.$store.commit('setSex',result.sex)
                                  }



                                }

                                // 消息类型是卡片式门禁卡（类似银行卡那种样式）
                                if(data.topic=='nfc-info'){
                                  var result=data.message
                                  if(result!==""&&result!==null){
                                    // 设置NFC卡号
                                    that.$store.commit('setNfcCode',result)
                                    console.log('APPvue修改NFC卡号',result);
                                  }
                                }
                              }else{
                                console.log('人员管理-添加人员弹窗没打开');
                              }
                              console.log(153,data.topic);
                              // 搜索设备（设备管理-搜索页面用）
                              if (that.path=='/sbgl'){
                                if(data.topic=='seach-device-add'){
                                  var result=data.message
                                  if(result!==""&&result!==null){
                                    result.id=Date.now()*Math.random()
                                    // result.ip=
                                    result.topic=data.topic
                                    that.$store.commit('setAddDeviceList',result)
                                  }
                                  that.$store.commit('setAddDeviceListLoading',true)
                                }else if(data.topic=='search-device-start'){
                                  that.$store.commit('setAddDeviceListLoading',true)
                                }else if(data.topic=='search-device-stop' ||data.topic=='seach-device-close'){
                                  that.$store.commit('setAddDeviceListLoading',false)
                                }
                              }
                              // 数据看板页面
                              if (data.topic=='passRecord'){
                                // var result=data.message
                                that.$store.commit('updateDataDashboard',new Date().getTime())
                              }
                            }
                          console.log('websocket服务器发来的消息是：',data);
                        }

                    };
                    that.ws.onclose = function () {
                        // 关闭 websocket
                        console.log("webSocket已关闭XXXXXXXXXXXXX");
                        // this.$globalWebSocket.ws.url=null
                        // that.$globalWebSocket=null
                        // setTimeout(() => {
                        //     that.initWebSocket();
                        // }, 2000);
                    };
                } else {
                    // 浏览器不支持 WebSocket
                    console.log("不支持 WebSocket!");
                }
            }
        },
    };
</script>

<style lang="less">
    html, body, #app {
        height: 100%;
        width: 100%;
        min-width: 1300px;
      user-select: none;
        /*overflow-x: scroll;*/
    }
    .el-form .el-form-item .el-form-item__label{
        width: auto !important;
    }
    .BlankPlaceholder .el-form-item__label{
        color: transparent !important;
    }

</style>
<style>
    .inputEl{
        /*width:260px !important;*/
    }
    /*解决png图片改变大小后变模糊的问题*/
    .hdPic{
        image-rendering:-moz-crisp-edges;
        image-rendering:-o-crisp-edges;
        image-rendering:-webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode:nearest-neighbor;
    }
    /*修改表头颜色*/
    .el-table th.el-table__cell {
        height: 60px;
        background:#fafafa;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 16px;
        color: #303030;
    }
    /*表格每一列的上下间距*/
    .el-table tbody .el-table__cell{
        /*padding: 3px 0;*/
    }
    /*表格每一行文字的颜色*/
    .el-table tbody .el-table__cell .cell{
        color: rgba(48, 48, 48, 1);
    }
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
        background: rgba(237, 241, 247, 1) !important;
    }
    /*马赛克背景*/
    .mosaicBackground{
        /*overflow: hidden;*/
        /*margin: 0px auto 20px auto;*/
        /*border: 1px solid #ccc;*/
        /*background-color: #fff;*/
        background-image: linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0) !important;
        background-position: 0 0,6px 6px,6px 6px,12px 12px !important;
        background-size: 12px 12px !important;
    }
</style>
